<template>
  <div class="header">
    <div class="modeW clearfix" :class='{active:activeHeader}'>
      <img src="../assets/images/app.png" class='logo' @click='toggleActiveHeader'>
      <div class="tabs pull-right">
        <span v-for='i in 7'>首页</span>
      </div>
    </div>
    <div class="modeB" :class='{active:activeHeader}'>
      <img src="../assets/images/app.png" class='logo' @click='toggleActiveHeader'>

      <div class="box pull-right" :class='{close:toolsActive}' @click='toolsActive = !toolsActive'>
        <div class="line"></div>
      </div>
    </div>
    <div class="toolsBox" :class='{active:toolsActive}'>
      <div class="inierTools clearfix">
        <div class="item pull-left" v-for='(i,index) in linkList'>
          <img class='icon' :src="i.icon">
          <span v-text='i.title' class="title"></span>
          <span v-text='i.desc' class="desc"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeHeader:false,
      toolsActive:false,
      linkList:[
        {
          icon:require('../assets/images/homes.png'),
          title:'首页',
          desc:'Home'
        },
        {
          icon:require('../assets/images/cases.png'),
          title:'案例',
          desc:'Cases'
        },
        {
          icon:require('../assets/images/Advantages.png'),
          title:'优势',
          desc:'Advantages'
        },
        {
          icon:require('../assets/images/tiyans.png'),
          title:'体验',
          desc:'Experience'
        },
        {
          icon:require('../assets/images/services.png'),
          title:'服务',
          desc:'Service'
        },
        {
          icon:require('../assets/images/abouts.png'),
          title:'关于',
          desc:'About'
        },
        {
          icon:require('../assets/images/contacts.png'),
          title:'联系',
          desc:'Contacts'
        }
      ]
    }
  },
  computed:{
    contentHeight(){
      return window.innerHeight - 86
    }
  },
  methods:{
    toggleActiveHeader(){
      
      if(this.activeHeader && this.toolsActive){
        this.toolsActive = false;

        setTimeout( ()=>{
          this.activeHeader = !this.activeHeader;
        },200)

      }else{
        this.activeHeader = !this.activeHeader;
      }
      
    }
  },
  watch:{

  },
  mounted(){
    // window.onresize = function(){
    //   console.log(123);
    // }
  }
}
</script>

<style scoped lang='scss'>
@import '../assets/scss/tool.scss';
.header{
  width: 100%;
  // @include lah(86px);
  color: $black;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;

  .logo{
    width: 200px;
    height: 60px;
    margin: 13px 0 0 100px;
  }

  .modeW{
    // 白色头
    @include lah(86px);
    background: #fff;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all .5s ease;
    opacity: 1;

    &.active{
      opacity: 0;
      @include transY(-86px);
    }

    .tabs{
      margin-right: 80px;
      span{
        margin: 0 20px;
        @include hand;
      }
    }
  }

  .modeB{
    // 黑色头
    @include lah(86px);
    background: rgba(0,0,0,0.25);
    z-index: 5;
    position: absolute;
    top: -86px;
    left: 0;
    width: 100%;
    transition: all .5s ease;
    opacity: 0;

    &.active{
      opacity: 1;
      @include transY(86px);
    }

    .box{
      width: 34px;
      height: 34px;
      position: relative;
      margin-right: 30px;
      margin-top: 25px;
      @include hand;

      &:hover{
        .line{
          &:before{
            @include transY(-2px);
          }

          &:after{
            @include transY(2px);
          }
        }
      }

      &.close{
        transition: transform .3s ease;

        &:hover{
          -webkit-transform: scale(.9);
          transform: scale(.9);
        }

        .line{
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          background: transparent;

          &:before{
            -webkit-transform: rotate(45deg) translate3d(10px,10px,0);
            transform: rotate(45deg) translate3d(10px,10px,0);
          }

          &:after{
            -webkit-transform: rotate(-45deg) translate3d(-5px,-5px,0);
            transform: rotate(-45deg) translate3d(5px,-5px,0);
          }
        }
      }

      .line{
        width: 100%;
        height: 4px;
        background: #FFF;
        position: absolute;
        top: 15px;
        transition: transform .3s ease;

        &:before{
          content: '';
          display: block;
          width: 100%;
          height: 4px;
          background: #FFF;
          position: absolute;
          top: -11px;
          left: 0;
          transition: all .3s ease;
        }

        &:after{
          content: '';
          display: block;
          width: 100%;
          height: 4px;
          background: #FFF;
          position: absolute;
          bottom: -11px;
          left: 0;
          transition: all .3s ease;
        }

      }
    }

  }

  .toolsBox{
    width: 100%;
    height: 100vh;
    background: #282828;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s ease;
    opacity: 0;
    z-index:2;
    @include transY(-100vh);
    &.active{
      opacity: 1;
      @include transY(0);
    }

    .inierTools{
      width: 1000px;
      height: 514px;
      position: absolute;
      top: 47%;
      left: 50%;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0);
      padding-top: 90px;

      .item{
        width: 333px;
        @include lah(130px);
        padding-left: 130px;
        position: relative;
        @include hand;
        transition: background .3s ease;
        &:hover{
          background: rgba(255,255,255,.3);
        }

        .icon{
          position: absolute;
          left: 70px;
          top: 52px;
        }
        .title{
          display: inline-block;
          vertical-align:top;
          color: #fff;
          font-size: 16px;
        }
        .desc{
          display: inline-block;
          vertical-align:top;
          color: #949494;
          margin-left: 20px;
          font-style:italic;
        }
      }
    }

  }
}

</style>
